<template>
    <ForOneHeader :enableBack="true" />
    <view class="walls-page">

        <!-- four wall categories lays here in column direction -->
        <MidLayout>
            <IndexTitle :zh_text="item.title" :en_text="item.en_title"></IndexTitle>
            <u-gap height="20rpx"></u-gap>

            <view class="category-container button-container">

                <BounceButton v-for="(item, index) in item.items" :key="index" @mytap="handleTap(item.id)"
                    height="220rpx" :image="item.pdf_cover" />

                <u-gap></u-gap>
            </view>
        </MidLayout>


    </view>



 
</template>

<script setup lang="ts">
import { ref, defineProps, reactive } from 'vue'

import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'

import { shareUtils } from '@/utils/share'
import {download_detail} from '@/api/download'
import useShare from '@/mixins/share'
import IndexTitle from '@/pages/walls/index-title.vue'
const {getShareCover} = useShare()
const buttons = ref([])
const show = ref(false)
const index = ref(-1)
const pop_up_title = ref('')
const share_cover = ref('')


const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
})

const item = reactive({
    share_cover_url:'',
    en_title:'',
    title:'',
    items:[]
})

const handleTap = (id)=>{

    uni.navigateTo({
        url:`/pages/download/detail?id=${id}`
    })
}

onLoad((options)=>{

    download_detail(options.id).then(res=>{
            // debugger
        item.share_cover_url = res.share_cover_url
        item.title = res.title
        item.en_title = res.en_title
        item.items = res.items
    })
})





const page = getCurrentPages().pop()

let path: string = page.route
onShareTimeline(() => {

    const share_path = show.value ? `${path}?id=${index.value}` : path
    const promise = new Promise(resolve => {
        getShareCover(path,pop_up_title.value,share_cover.value).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })
    
    return {
        title: show.value ? pop_up_title.value:null,
        imageUrl: share_cover.value,
        path: shareUtils.buildPathQuery(share_path),
        promise
    }
})
onShareAppMessage(() => {
    const share_path = show.value ? `${path}?id=${index.value}` : path
    const promise = new Promise(resolve => {
        getShareCover(path,pop_up_title.value,share_cover.value).then(res => {
            // debugger
            res.path = shareUtils.buildPathQuery(share_path)
            resolve(res)
        })

    })
    
    return {
        title: show.value ? pop_up_title.value:null,
        imageUrl: share_cover.value,
        path: shareUtils.buildPathQuery(share_path),
        promise
    }
})





</script>

<style scoped>
.share-btn::after {
    border: 0rpx solid #fff;
}

.share-btn {
    padding: 0rpx;
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10rpx;
    /* 按钮之间的间距 */
}

/* 按钮通用样式 */
.menu {
    display: flex;
    flex-direction: row;

}

.gap {
    width: 30rpx;
}

.tools {
    display: flex;
    flex-direction: row;
    padding: 20rpx 0;
    justify-content: space-between;
    width: 100vw;
}
</style>